{{- extends "layout/default" }}
{{- import "blocks/underlinenav" }}
{{- block body() }}
<div class="row justify-content-center g-4">
  <h1 class="text-center"><i class="bi bi-compass me-2"></i>Discovery</h1>

  <div class="col-12">

    <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-4">
      <div class="mb-2 mb-md-0">
        {{- Type := "discovery" }}
        {{- path := slice("discovery", "discovery/novel") }}
        {{- name := slice("Artworks", "Novels")}}
        {{- yield UnderlineNav(baseURL="", paths=path, names=name, activeState=Type)}}
      </div>

      <!-- TODO: is it actually set to "safe" by default? -->
      {{- Mode := isset(Queries.mode) ? Queries.mode : "safe" }}
      {{- url := replaceQuery(.Queries, "mode", "") }}
      {{- path := slice("all", "safe", "r18") }}
      {{- name := slice("All", "Safe", "R-18")}}
      {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
    </div>

    <!-- Main content -->
    <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
      {{- include "fragments/small-tn" .Artworks }}
    </div>

  </div>

  <div class="d-flex justify-content-center">
    <a href="" class="custom-btn-secondary-flex">Refresh</a>
  </div>

</div>
{{- end }}
